<template>
	<!-- 简历详情-她的日程 -->
	<view>
		<u-navbar back-text="“她”的日程" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<view class="listTable">

			<view class="table" style="padding: 34rpx 20rpx 28rpx 20rpx;">
				<u-row>
					<u-col span="3">
						<image :src="data.portrait" style="width: 140rpx;height: 222rpx;border-radius: 5rpx;"></image>
					</u-col>
					<u-col span="9">
						<view style="display: flex;flex-direction: row; ">
							<view class="typeface1">{{data.name}}</view>
							<view class="onGuard" style="margin-left: 14rpx;margin-top: 7rpx;">在职</view>
							<view class="leisure" style="margin-left: 14rpx;margin-top: 7rpx;" v-if="data.status==2">空闲</view>
							<view class="busy" style="margin-left: 14rpx;margin-top: 7rpx;" v-if="data.status==1">忙碌</view>
						</view>
						<view style="margin-top: 8rpx;">
							<view class="typeface2">{{data.score}}分</view>
							<u-rate :count="count" v-model="data.score" :disabled="true" active-color="#F29423"></u-rate>
						</view>
						
						<view style="display: flex;flex-direction: row;margin-top: 14rpx;">
							<view class="typeface4" style="padding-right: 14rpx;border-right: 2rpx solid #DEDEDE;">年龄：{{data.age}}</view>
							<view class="typeface4" style="padding-right: 14rpx;border-right: 2rpx solid #DEDEDE;padding-left: 14rpx;">经验：{{data.workExperience}}年</view>
							<view class="typeface4" style="padding-left: 14rpx;">民族：{{data.nation}}</view>
							
						</view>

					</u-col>
				</u-row>
			</view>

			<view class="table" style="margin-top: 28rpx;padding: 0rpx 0rpx 0rpx 20rpx;" :key="refresh">
				<calendar ref="calendar" lastText="<" nextText=">" 
				:rangeMode='rangeMode'
				:showLunar='false'
				:disabled="false"
				:busyList="busyList"
				@monthChange="monthChange">
				</calendar>
			</view>


			<view style="display: flex;flex-direction: row;margin: 40rpx;">
				<view class="dot" style="margin-top: 12rpx;"></view>
				<view class="typeface3">
					<view>日程表提示：</view>
					<view style="margin-top: 14rpx;">无任何标记的是空闲状态</view>
					<view style="display: flex;flex-direction: row;align-items: center;">
						“<image src="../../../static/img/1-23.png" style="width: 22rpx;height: 22rpx;"></image>”
						<view>代表<text style="color:#E83030">忙碌</text>状态</view>
					</view>
				</view>

			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import calendar from '@/components/Li-Calendar/Li-Calendar.vue';
	export default {
		data() {
			return {
				background:{
					backgroundColor: '#fca800',
				},
				count: 5,
				refresh:0,
				busyList: [],
				range: {
					rangeStart: undefined, //设置标记范围开始，yyyyMM-dd
					rangeEnd: undefined //设置标记范围结束，yyyyMM-dd
				},
				rangeMode: false,
				employeeId:null,
				month:null,
				data:null,
			}
		},
		components: {
			calendar:calendar
		},
		onLoad(option) {
			this.employeeId=option.employeeId;
			var aData = new Date();
			var months=(aData.getMonth() + 1)>9?(aData.getMonth() + 1):'0'+(aData.getMonth() + 1);
			this.month=aData.getFullYear() + "-" + months;
			this.getDateData();
			this.getPersonalInformation();
		},
		methods: {
			getPersonalInformation:function(){
				var date = new Date();
				var months=(date.getMonth() + 1)>9?(date.getMonth() + 1):'0'+(date.getMonth() + 1);
				var day=date.getDate()>9?date.getDate():'0'+date.getDate();
				var nextData = date.getFullYear() + '-' + months + '-' + day;
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'employee/getSchedulingUserInfo',
					
				};
				let data = {
					employeeId:this.employeeId,
					day:nextData,
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code=="200"){
						if(res.data){
							this.data=res.data;
						}
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				});
			},
			//获取日期
			getDateData:function(){
				var that=this;
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'employee/getScheduling',
					
				};
				let data = {
					employeeId:this.employeeId,
					month:this.month,
					scheduleType:3
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code=="200"){
						if(res.data){
							var busyLists=[];
							for (var i = 0; i < res.data.length; i++) {
								var data=this.getdiffdate(res.data[i].startTime,res.data[i].endTime);
								for (var j = 0; j < data.length; j++) {
									busyLists.push(data[j]);
								}
							}
							that.busyList=busyLists;
							console.log("页面刷新参数-----");
							
							that.$refs.calendar.render(this.month,that.busyList);
							that.refresh+=1;
						}
					} else {
						console.log("页面刷新参数==========");
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				});
			},
			//获取时间
			monthChange:function(date){
				console.log(date);
				this.month=date.date;
				this.getDateData();
			},
			//获取两个时间段的日期
			getdiffdate:function(stime,etime){
				
			    //初始化日期列表，数组
			    var diffdate = new Array();
			    var i=0;
			    //开始日期小于等于结束日期,并循环
			    while(stime<=etime){
			        diffdate[i] = stime.substring(0,10);
			        
			        //获取开始日期时间戳
			        var stime_ts = new Date(stime.replace(/-/g, "/")).getTime();
			        // console.log('当前日期：'+stime   +'当前时间戳：'+stime_ts);
			        
			        //增加一天时间戳后的日期
			        var next_date = stime_ts + (24*60*60*1000);
			        
			        //拼接年月日，这里的月份会返回（0-11），所以要+1
			        var next_dates_y = new Date(next_date).getFullYear();
			        var next_dates_m = (new Date(next_date).getMonth()+1 < 10)?'0'+(new Date(next_date).getMonth()+1):(new Date(next_date).getMonth()+1);
			        var next_dates_d = (new Date(next_date).getDate() < 10)?'0'+new Date(next_date).getDate():new Date(next_date).getDate();
			 
			        stime = next_dates_y+"-"+next_dates_m+"-"+next_dates_d+" 00:00:00";
			        //增加数组key
			        i++;
			    }
				return diffdate;
			    // console.log(diffdate);
			},
		}
	}
</script>

<style>
	.listTable {
		padding-top: 44rpx;
	}

	.table {
		/* width: 686rpx; */
		width: 92%;
		margin: auto;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 38rpx;
		/* margin-left: 32rpx; */

	}

	.typeface1 {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #7A7A7A;
		opacity: 1;
	}

	.typeface2 {
		width: 18%;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		opacity: 1;
		color: #f29423;background-color: #FFF6EB;padding: 2rpx 10rpx;border-radius: 20rpx;
	}

	.onGuard {
		width: 80rpx;
		height: 34rpx;
		border: 2rpx solid #FCA800;
		opacity: 1;
		border-radius: 18rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #FCA800;
		opacity: 1;
		text-align: center;
	}

	.leisure {
		width: 80rpx;
		height: 34rpx;
		background: #FCA800;
		opacity: 1;
		border-radius: 18rpx;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.busy {
		width: 80rpx;
		height: 34rpx;
		background: #F86565;
		opacity: 1;
		border-radius: 18rpx;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.dot {
		width: 20rpx;
		height: 20rpx;
		background: #FCB62B;
		border-radius: 50%;
		opacity: 1;
	}

	.typeface3 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3F3F3F;
		opacity: 1;
	}
	.typeface4{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3F3F3F;
		opacity: 1;
	}
</style>
